import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { Drawer, Spin, Tooltip } from 'antd';
import { connect } from 'umi';
import { getSupplierDetail } from '@/services/supplier';
import styles from './index.less';
import tipsIcon from '@/assets/images/supplier/tips_icon.png';

const SupplierDetail = forwardRef((props, ref) => {
  const { id } = props;
  const [visible, setVisible] = useState(false);
  const [data, setData] = useState({});

  useEffect(() => {
    if (id) {
      setData({});
      getSupplierDetail({ id }).then((res) => {
        if (res.data) {
          setData(res.data);
        }
      });
    }
  }, [id]);

  useImperativeHandle(ref, () => ({
    setVisible,
  }));

  const onClose = () => {
    setVisible(false);
  };

  return (
    <Drawer width={900} visible={visible} closable={false} onClose={onClose}>
      {data.id ? (
        <div className={styles.drawerWrapper}>
          <div className={styles['common-wrapper-title']}>供应商详情</div>
          <div className={styles['basis-info']}>
            <div className={styles.line}>
              <div className={styles.name}>{data.title}</div>

              <div className={styles.remark}>{data.remake}</div>
            </div>
            <div className={styles.line} style={{ marginTop: '45px', marginBottom: '18px' }}>
              <div className={styles['info-cell']}>
                <div className={styles['info-name']}>账号：</div>
                <span className={styles['info-content']}>{data.phone}</span>
              </div>
              <div className={styles['info-cell']}>
                <div className={styles['info-name']}>联系人：</div>
                <span className={styles['info-content']}>{data.contact_name}</span>
              </div>
              <div className={styles['info-cell']}>
                <div className={styles['info-name']}>创建时间：</div>
                <span className={styles['info-content']}>
                  {data.created_at ? data.created_at : '---'}
                </span>
              </div>
            </div>
            <div className={styles.line}>
              <div className={styles['info-cell']}>
                <div className={styles['info-name']}>会员ID：</div>
                <span className={styles['info-content']}>{data.user_id}</span>
              </div>
              <div className={styles['info-cell']}>
                <div className={styles['info-name']}>联系手机：</div>
                <span className={styles['info-content']}>
                  {data.contact_phone ? data.contact_phone : '暂无设置联系电话'}
                </span>
              </div>
              <div className={styles['info-cell']}>
                <div className={styles['info-name']}>地址：</div>
                <span className={styles['info-content']}>
                  {data.address ? data.address : '暂无设置地址'}
                </span>
              </div>
            </div>
          </div>
          <div className={styles['number-info-wrapper']}>
            <div className={styles['number-info']}>
              <div className={styles['number-info-cell']}>
                <div className={styles['number-info-item']}>
                  <div className={styles['number-info-name']}>已上架商品数</div>
                  <div className={styles['number-info-content']}>{data.selling_spu_count}</div>
                </div>
                <div className={styles['number-info-item']}>
                  <div className={styles['number-info-name']}>订单数</div>
                  <div className={styles['number-info-content']}>{data.trade_count}</div>
                </div>
                <div className={styles['number-info-item']}>
                  <div className={styles['number-info-name']}>采购订单数</div>
                  <div className={styles['number-info-content']}>{data.purchase_count}</div>
                </div>
                <div className={styles['number-info-item']}>
                  <div className={styles['number-info-name']}>已提现金额</div>
                  <div className={styles['number-info-content']}>￥{data.has_withdraw_amount}</div>
                </div>
              </div>
              <div className={styles['number-info-cell']}>
                <div className={styles['number-info-item']}>
                  <div className={styles['number-info-name']}>仓库中商品数</div>
                  <div className={styles['number-info-content']}>{data.halt_sales_spu_count}</div>
                </div>
                <div className={styles['number-info-item']}>
                  <Tooltip title="供货商发货的商品订单实付金额">
                    <div className={styles['number-info-name']}>
                      订单总金额
                      <img className={styles['tip-icon']} src={tipsIcon} alt="tip" />
                    </div>
                  </Tooltip>
                  <div className={styles['number-info-content']}>￥{data.trade_amount}</div>
                </div>
                <div className={styles['number-info-item']}>
                  <Tooltip title="待审核、已完成的采购订单总金额">
                    <div className={styles['number-info-name']}>
                      采购金额
                      <img className={styles['tip-icon']} src={tipsIcon} alt="tip" />
                    </div>
                  </Tooltip>
                  <div className={styles['number-info-content']}>￥{data.purchase_all_amount}</div>
                </div>
                <div className={styles['number-info-item']}>
                  <div className={styles['number-info-name']}>可提现金额</div>
                  <div className={styles['number-info-content']}>￥{data.wait_withdraw_amount}</div>
                </div>
              </div>
              <div className={styles['number-info-cell']}>
                <div className={styles['number-info-item']}>
                  <Tooltip title="所有已完成交易订单供应商收入总额">
                    <div className={styles['number-info-name']}>
                      订单已入账金额
                      <img className={styles['tip-icon']} src={tipsIcon} alt="tip" />
                    </div>
                  </Tooltip>
                  <div className={styles['number-info-content']}>￥{data.trade_fund_amount}</div>
                </div>
                <div className={styles['number-info-item']}>
                  <Tooltip title="已完成的采购订单总收入">
                    <div className={styles['number-info-name']}>
                      采购已入账金额
                      <img className={styles['tip-icon']} src={tipsIcon} alt="tip" />
                    </div>
                  </Tooltip>
                  <div className={styles['number-info-content']}>￥{data.purchase_amount}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div
          style={{
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Spin size={'large'} />
        </div>
      )}
    </Drawer>
  );
});

const mapStateToProps = (state) => {
  return state;
};

export default connect(mapStateToProps, null, null, { forwardRef: true })(SupplierDetail);
